<!-- 买入记录   -->
<template>
  <div class="buy_records">
    <van-nav-bar
      title="买入详细记录"
      left-arrow
      @click-left="$router.back()"
      left-text="返回"
    />
    <div v-if="buyRecordsList.length">
      <van-cell>
        <van-row style="text-align: center; vertical-align: center" align="center" type="flex" justify="space-between">
          <van-col span="6">时间</van-col>
          <van-col span="6">每股股价(￥)</van-col>
          <van-col span="6">买入数量</van-col>
          <van-col span="6">金额(￥)</van-col>
        </van-row>
      </van-cell>
      <van-cell  v-for="item in buyRecordsList" :key="item.id" style="font-size: 12px">
        <van-row type="flex" style="text-align:center" align="center" justify="space-between">
          <van-col span="6">{{item.createdate}}</van-col>
          <van-col span="6">{{(item.price / 1000).toFixed(3) }}</van-col>
          <van-col span="6">{{item.amount}}</van-col>
          <van-col span="6">{{ (item.money / 1000).toFixed(3) }}</van-col>
        </van-row>
      </van-cell>
      <van-pagination
        v-model="pageIndex"
        style="margin-top: 3px"
        :total-items="totalRecord"
        :items-per-page="pageSize"
        force-ellipses
        @change="handleChange"
      />
    </div>

    <van-divider style="margin-top: 160px" v-else>暂无记录</van-divider>
  </div>
</template>

<script>
export default {
  name: "buyHistory",
  data(){
    return {
      buyRecordsList:[],
      pageIndex: 1,
      pageSize: 20,
      totalRecord: 0,
      stockId: '',
    }
  },
  created() {
    const stockId = JSON.parse(localStorage.getItem('stockItem')).id
    if (stockId){
      this.stockId = stockId
    }
  },
  mounted() {
    if (this.stockId){
      // 初始化
      const params = {
        id: this.stockId,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }
      // 封装函数
      this._getBuyRecordList(params)
    }
  },

  methods: {
    _getBuyRecordList(params){
      this.$api.stock.reqBuyRecord(params).then(res =>{
        if(res.code===200){
          this.buyRecordsList = res.data.items
          this.totalRecord = res.data.total || res.data.count || 0
        }
      })
    },

    handleChange(value) {
      const params = {
        id: this.stockId,
        pageIndex: value,
        pageSize: this.pageSize,
      };

      this._getBuyRecordList(params)
    },

  },
}
</script>

<style scoped>

</style>
